#bodye {
    position: absolute;
    top: 0;
    left: 0;
    width: 1520px;
    
}
#app2 {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    /* height: 3000px; */
    /* background-color: rgb(214, 112, 112); */
    
}
#app2>div {
    position: absolute;
    top: 2500px;
    left: 0;
    width: 1200px;
    height: 2000px;
    /* background-color: rgb(252, 119, 119); */
    background-color: rgba(225, 225, 225, 0.8);
    box-shadow: 0 0 10px 2px rgb(130, 129, 129);
    border-radius: 10px;
    
}

.app2-nav {
    position: absolute;
    top: 0px;
    left: 0;
    width: 1200px;
    height: 200px;
    /* background-color: rgb(152, 110, 110); */
    box-shadow: 0 0 7px 1px rgba(111, 111, 112);
}
.app2-nav-name {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 200px;
    /* background-color: rgb(215, 202, 202); */
}
.app2-nav-name>p {
    display: block;
    width: 1200px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 50px;
    font-weight: 1000;
    color: rgb(41, 40, 40);
}
.app2-main {
    position: absolute;
    top: 300px;
    left: 0;
    width: 1200px;
    height: 500px;
    /* background-color: pink; */

     perspective: 1000px;

     background-position: center center;
     /* 内容高度大于图片高度时，相对固定 */
     background-attachment: fixed;
     /* 让背景图基于容器大小伸缩 */
     background-size: cover;
}
.app2-main-jieshi {
    display: none;
    position: absolute;
    top: 0;
    left: 0px;
    width: 350px;
    height: 50px;
    /* background-color: rgba(236, 233, 227, 0.3); */
    border-radius: 0 50px 50px 0;
    box-shadow: 2px 2px 3px 3px rgba(105, 105, 105);
    text-align: center;
    line-height: 50px;
    color: rgb(41, 40, 40);
}
section {
    /* perspective: 1000px; */
    position: relative;
    /* margin: 150px auto;
    width: 300px;
    height: 200px; */
    margin: 150px 270px;
    width: 200px;
    height: 170px;
    transform-style: preserve-3d;
    /* 调用动画效果 */
    animation: rotate 10s linear infinite;
}

section:hover {
    /* 鼠标放入停止动画 */
    animation-play-state: paused;
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}
@keyframes topp {
    0% {
        transform: translateZ(300px);
    }
    100% {
        transform: translateZ(350px);
    }
}
section div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: antiquewhite; */
    /* background-color: rgb(161, 51, 51); */
    border-radius: 10px;
    box-shadow: 0px 0 10px 1px rgb(220, 220, 220);
    /* background-image: url(./4E89A9CBB1CB855037FE39AEEECBAA84.jpg); */
}

section div:nth-child(1) {
    transform: translateZ(200px);
    background-color: rgb(255, 0, 0,0.2);
}
section div:nth-child(1):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
    /* animation: topp 1s linear forwards; */
}

section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(200px);
    background-color: rgb(255, 166, 0,0.2);
}
section div:nth-child(2):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
}

section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(200px);
    background-color: rgb(255, 255, 0,0.2);
}
section div:nth-child(3):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
}

section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(200px);
    background-color: rgb(0, 128, 0,0.2);
}
section div:nth-child(4):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
}
section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(200px);
    background-color: rgb(0, 0, 255,0.2);
}
section div:nth-child(5):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
}
section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(200px);
    background-color: rgb(128, 0, 128,0.2);
}
section div:nth-child(6):hover {
    box-shadow: 0px 5px 5px 2px rgb(118, 118, 118);
}
.app2-mian-div {
    display: none;
    position: absolute;
    /* top: 500px; */
    top: 398px;
    left: 0;
    height: 250px;
    width: 1200px;
    /* background-color: rgb(247, 247, 247); */
    box-shadow: 0px 5px 5px 1px rgb(157, 157, 157);
}
.app2-mian-div>p {
    position: relative;
    float: left;
    margin-left: 43px;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 0 7px 2px rgb(226, 226, 226);
}
.app2-mian-div>p>span {
    position: absolute;
    bottom: -50px;
    left: 5px;
    width: 200px;
    font-size: 15px;
    font-weight: 1000;
}
.l {
    background-color: rgb(89, 109, 116);
    background-color: rgb(255, 255, 0,0.2);
}
#app2-main-reight {
    position: absolute;
    top: -30px;
    right: 100px;
    width: 300px;
    height: 350px;
    background-color: rgb(199, 199, 199);
    border-radius: 10px ;
    box-shadow: 0 0 5px 3px rgb(154, 154, 154)
}
#app2-main-bottom {
    display: none;
    position: absolute;
    top: 398px;
    left: 0;
    width: 1200px;
    height: 250px;
    background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);
    /* background-color: #fff; */
    border-radius: 20px;
    text-align: center;
    line-height: 250px;
    font-size: 35px;
    font-weight: 1000;
}
.app2-bottom {
    position: absolute;
    top: 950px;
    left: 0;
    width: 1200px;
    height: 800px;
    /* background-color: rgb(161, 142, 142); */
}
.app2-bottom>p:nth-child(1) {
    position: absolute;
    top: 50px;
    left: 0;
    width: 500px;
    height: 60px;
    box-shadow: 0 2px 5px 1px rgb(117, 117, 117);
    line-height: 60px;
    text-align: center;
}
.app2-bottom>p:nth-child(1)>div {
    position: absolute;
    top: 80px;
    left: 0px;
    width: 500px;
    height: 333px;
    background: url(./images/1.png) no-repeat 50% 50%;
    background-size: 120%;

}
.app2-bottom>p:nth-child(2) {
    position: absolute;
    top: 250px;
    right: 0;
    width: 500px;
    height: 60px;
    /* background-color: rgb(109, 99, 99); */
    line-height: 60px;
    text-align: center;
    box-shadow: 0 2px 5px 1px rgb(117, 117, 117);
}
.app2-bottom>p:nth-child(2)>div {
    position: absolute;
    top: 80px;
    right:  0px;
    width: 500px;
    height: 333px;
    background: url(./images/2.png) no-repeat 50% 50%;
    background-size: 120%;

}
.app2-bottom>p:nth-child(3) {
    position: absolute;
    top: 600px;
    left:  0;
    width: 500px;
    height: 60px;
    /* background-color: rgb(109, 99, 99); */
    line-height: 60px;
    text-align: center;
    box-shadow: 0 2px 5px 1px rgb(117, 117, 117);
}
.app2-bottom>p:nth-child(3)>div {
    
    background: url(./images/3.png) no-repeat 50% 50%;
    background-size: 120%;
    box-shadow: 0 5px 5px 5px rgb(117, 117, 117);
    

}
.app2-bottom-div {
    position: absolute;
    top: 2250px;
    left: 0;
    width: 1200px;
    height: 1px;
    background-color: rgb(144, 105, 105);
}
.app2-bottom-div div:nth-child(1) p:nth-child(1) {
    font-size: 100px;
    /* font-weight: 1000; */
}
.app2-bottom-div div:nth-child(1) p:nth-child(2) {
    font-size: 18px;
    /* font-weight: 1000; */
}
.app2-bottom-div div:nth-child(1) p:nth-child(3) {
    position: absolute;
    top: 300px;
    font-size: 18px;
    /* font-weight: 1000; */
}
.app2-bottom-div div:nth-child(2) {
    position: absolute;
    top: 500px;
    left: 0;
    width: 1200px;
    height: 1200px;
    /* background-color: rgb(213, 187, 187); */
    box-shadow: 0 5px 5px 5px rgb(122, 122, 122);
    border-radius: 20px;
}
.app2-bottom-div div:nth-child(2)>div {
    /* display: none; */
}
.app2-bottom-div div:nth-child(2) div:nth-child(1) {
    position: absolute;
    top: 80px;
    right: 0;
    width: 0px;
    height: 200px;
    background-color: #cfc7f8;
}
.app2-bottom-div div:nth-child(2) div:nth-child(2) {
    position: absolute;
    top: 360px;
    left: 0;
    width: 0px;
    height: 200px;
    background-color: #cfc7f8;
    border-radius: 0;
    box-shadow: none;
}
.app2-bottom-div div:nth-child(2) div:nth-child(3) {
    position: absolute;
    top: 640px;
    right: 0;
    width: 0px;
    height: 200px;
    background-color: #cfc7f8;
}
.app2-bottom-div div:nth-child(2) div:nth-child(4) {
    position: absolute;
    top: 920px;
    left: 0;
    width: 0px;
    height: 200px;
    background-color: #cfc7f8;
}
.app2-bottom-divlin-3 {
   
    /* position: absolute;
    top: 1750px;
    left: 0; */
    width: 1200px;
    height: 750px;
    /* background-color: pink; */
}
.app2-bottom-divlin-3-1 {
    position: absolute;
    /* top: 20px;
    left: 400px;
    width: 400px;
    height: 200px; */
    /* box-shadow: 0 3px 3px 3px rgb(134, 134, 134); */
    /* border-radius: 10px; */
    background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
}
.app2-bottom-divlin-3-2 {
    position: absolute;
    /* top: 127px;
    left: 122px;
    width: 243px;
    height: 300px; */
    /* box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
}
.app2-bottom-divlin-3-3 {
    position: absolute;
    /* top: 253px;
    left: 400px;
    width: 332px;
    height: 175px; */
    /* box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
}
.app2-bottom-divlin-3-4 {
    position: absolute;
    /* top: 253px;
    left: 761px;
    width: 345px;
    height: 175px;
    box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);
}
.app2-bottom-divlin-3-5 {
    position: absolute;
    /* top: 464px;
    left: 0px;
    width: 460px;
    height: 237px; */
    /* box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
.app2-bottom-divlin-3-6 {
    position: absolute;
    /* top: 464px;
    left: 494px;
    width: 243px;
    height: 237px; */
    /* box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);
}
.app2-bottom-divlin-3-7 {
    position: absolute;
    /* top: 464px;
    left: 771px;
    width: 449px;
    height: 237px;
    box-shadow: 0 3px 3px 3px rgb(134 134 134); */
    /* border-radius: 10px; */
    background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
.app2-bottom-divlin-4 {
    display: none;
    position: absolute;
    top: 3000px;
    left: 0;
    width: 1200px;
    height: 1000px;
    /* background-color: rgb(183, 136, 136); */
    box-shadow: 0 3px 3px 3px rgb(101, 101, 101);
    border-radius: 20px;
    z-index: 999;
}
.app2-bottom-divlin-4>p {
    position: absolute;
    top: 100px;
    left: 50px;
    font-size: 60px;
    color: rgb(83, 82, 82);

}
.app2-bottom-divlin-4-div1 {
    position: absolute;
    top: 300px;
    left: 50px;
    width: 600px;
    height: 80px;
    /* background-color: rgb(189, 135, 135); */
}
.app2-bottom-divlin-4-div1>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    /* line-height: 80px; */
    background-color: rgb(105, 103, 103);
}
.app2-bottom-divlin-4-div1>p {
    position: absolute;
    top: 7px;
    left: 100px;
    width: 500px;
    height: 65px;
    border-radius: 30px;
    background-color: rgb(175, 175, 175);
    box-shadow: 0 3px 3px 3px rgb(101, 101, 101);
}
.app2-bottom-divlin-4-div2 {
    position: absolute;
    top: 500px;
    right: 50px;
    width: 600px;
    height: 80px;
    /* background-color: rgb(189, 135, 135); */
}
.app2-bottom-divlin-4-div2>div {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    /* line-height: 80px; */
    background-color: rgb(105, 103, 103);
}
.app2-bottom-divlin-4-div2>p {
    position: absolute;
    top: 7px;
    right: 100px;
    width: 500px;
    height: 65px;
    border-radius: 30px;
    background-color: rgb(175, 175, 175);
    box-shadow: 0 3px 3px 3px rgb(101, 101, 101);
}